<template>
  <div class="page">
    <label-header
      :title="detailInfo?.name"
      dmp-label-text="文本相似度"
      :percent="Number(progressInfo?.progress) || 0"
      @delete-success="deleteTask"
      @update-success="updateTask"
    />

    <div class="page-main">
      <div class="search-wrap">
        <span>文本列表</span>
        <index-filter v-model:value="indexValue" @inquire="indexFilterInquire" @reset="indexFilterReset" />
        <a-select
          v-model:value="pageForm.type"
          :options="selectOption"
          size="small"
          class="index-filter-select-wrap"
          style="width: 132px"
          @change="() => getDataList()"
        />
      </div>
      <div class="px-20">
        <div class="table-like">
          <div class="table-tr table-head">
            <div class="tr-order table-td">序号</div>
            <div class="tr-status table-td">状态</div>
            <div class="tr-text table-td">文案内容</div>
            <div class="tr-like table-td">相似度</div>
            <div class="tr-tools table-td"></div>
          </div>
          <a-spin :spinning="saveLabelLoading || getDataListLoading">
            <div v-for="record in dataList" :key="record.id" class="table-body table-tr">
              <div class="tr-order table-td">{{ record.num }}</div>
              <div class="tr-status table-td">
                <div class="w-16 label-status" :class="record.markType && 'marked'">
                  <i class="iconfont icon-flag-fill"></i>
                </div>
              </div>
              <div class="tr-text table-td" :class="{ del: record.remove }">
                <div class="tr-text__block">
                  <div class="text elliptical-2" :title="record.text">
                    {{ record.text }}
                  </div>
                </div>
                <div class="tr-text__block">
                  <div class="text elliptical-2" :title="record.textSimilar">{{ record.textSimilar }}</div>
                </div>
              </div>
              <div class="tr-like table-td p-0" :class="{ del: record.remove }">
                <div v-if="record.remove" class="text-color-4">该文本是无效数据，不可操作</div>
                <div v-else class="custom-steps">
                  <div
                    v-for="tag in tagList"
                    :key="tag.title"
                    class="step-item"
                    :class="{ active: record.taskLabelId === tag.value }"
                    @click="saveTextTag(record, tag)"
                  >
                    <div class="item-icon">
                      <img v-if="record.taskLabelId === tag.value" src="@/assets/img/steps-custom-icon/select.svg" alt="" />
                      <img v-else src="@/assets/img/steps-custom-icon/no-select.svg" alt="" />
                    </div>
                    <div class="item-title">
                      {{ tag.title }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="tr-tools table-td">
                <a-button v-if="record.remove" type="link" @click="recoverText(record.id)">撤销</a-button>
                <a-button v-else type="link" @click="delText(record.id)">无效</a-button>
              </div>
            </div>
          </a-spin>
        </div>
        <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { provide, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import useList from '@/hooks/use-list'
  import { textLabelApi } from '@/services'

  import IndexFilter, { IndexFilterValue } from '../../components/IndexFilter.vue'
  import LabelHeader from '../../components/LabelHeader.vue'
  import { useProgress, useTask } from '../../hooks/use-task-info'
  import { TextRecord } from '../types'

  const route = useRoute()
  const router = useRouter()

  const taskId = route.params.id as string

  interface FormState {
    taskId: string
    numStart?: number | undefined
    numEnd?: number | undefined
    type: 0 | 1 | 2
  }

  const { detailInfo, isEditable, getTaskDetail } = useTask(taskId as string)
  const { progressInfo, getLabelProgress } = useProgress(taskId as string)

  // 注入数据
  provide('isEditable', isEditable)

  const indexValue = ref<IndexFilterValue>([undefined, undefined])
  const selectOption = [
    { label: '未标注', value: 0 },
    { label: '已标注', value: 1 },
    { label: '无效', value: 2 }
  ]
  const {
    getDataList,
    loading: getDataListLoading,
    pageForm,
    dataList
  } = useList<FormState, TextRecord>(textLabelApi.getTaskTextList, {
    taskId: taskId,
    type: 0,
    numStart: indexValue.value[0],
    numEnd: indexValue.value[1]
  })

  // 查询索引
  const indexFilterInquire = () => {
    getDataList({
      numStart: indexValue.value[0],
      numEnd: indexValue.value[1]
    })
  }

  const deleteTask = () => {
    router.push('/dmp/task-list')
  }

  // 更新任务
  const updateTask = () => {
    reloadPage()
  }

  /* 标注操作-------------------------------------------------------------------------------------------------------- */

  interface Tag {
    title: string
    value: number
  }
  const tagList: Tag[] = [
    {
      title: '不相似',
      value: 0
    },
    {
      title: '有点相似',
      value: 1
    },
    {
      title: '非常相似',
      value: 2
    },
    {
      title: '完全一致',
      value: 3
    }
  ]

  const { loading: saveLabelLoading, runAsync: runSaveLabel } = useRequest(textLabelApi.save, {
    manual: true
  })
  const saveTextTag = async (record: TextRecord, tag: Tag) => {
    const params = {
      taskId,
      taskInfoId: record.id,
      resultTypeEnum: 3,
      resultReqVOList: [
        {
          // type: 0,
          taskLabelId: tag.value,
          taskLabelName: tag.title
        }
      ]
    }

    await runSaveLabel(params, { isAddUid: true })
    message.success('保存成功')
    getDataList()
    getLabelProgress()
  }

  /* 删除or撤销删除-------------------------------------------------------------------------------------------------------- */
  /* 删除 */
  const { runAsync: runDelText } = useRequest(textLabelApi.delText)
  const delText = async (id: string) => {
    await runDelText({}, { urlParams: { id }, isAddUid: true })
    message.success('操作成功')
    getDataList()
  }

  /* 撤销删除 */
  const { runAsync: runRecoverText } = useRequest(textLabelApi.recoverText)
  const recoverText = async (id: string) => {
    await runRecoverText({}, { urlParams: { id }, isAddUid: true })
    message.success('撤销成功')
    getDataList()
  }

  /* 获取用户筛选历史记录 */
  const getUserHistory = async () => {
    const { data } = await textLabelApi.getUserHistory({}, { urlParams: { id: taskId } })
    setFiltrateInfo(data)
    reloadPage()
  }

  // 重置索引
  const indexFilterReset = async () => {
    const { data } = await textLabelApi.resetUserHistory({ taskId: taskId, type: pageForm.value.type })
    setFiltrateInfo(data)
    reloadPage()
  }

  // 设置筛选信息
  const setFiltrateInfo = (data: any) => {
    const startNum = data.numStart || undefined
    const numEnd = data.numEnd || undefined
    const type = data.type ?? 0
    indexValue.value = [startNum, numEnd]
    pageForm.value.type = type
    pageForm.value.numStart = startNum
    pageForm.value.numEnd = numEnd
  }

  /* -------------------------------------------------------------------------------------------------------- */
  const reloadPage = () => {
    getLabelProgress()
    getTaskDetail()
    getDataList()
  }

  getUserHistory()
</script>

<style lang="less" scoped>
  .page {
    padding-bottom: 50px;
    background-color: #fff;

    .page-main {
      padding: 0;

      .search-wrap {
        display: flex;
        align-items: center;
        padding: 12px 24px;
        margin-bottom: 12px;
        width: 100%;
        border-bottom: 1px solid @mask1;
        flex-shrink: 0;
        gap: 0 8px;

        & > span {
          margin-right: 54px;
          color: @text01;
          .font14();
        }
      }

      .table-like {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .table-tr {
          display: flex;
          align-items: center;
          width: 100%;
          border-radius: 2px;

          .table-td {
            padding: 16px;

            .label-status {
              color: rgba(186, 187, 190, 1);

              &.marked {
                color: @success;
              }
            }
          }

          .tr-check {
            width: 48px;
          }

          .tr-order {
            min-width: 62px;
          }

          .tr-status {
            min-width: 62px;
          }

          .tr-text {
            flex: 1;
          }

          .tr-like {
            width: 316px;
            min-width: 316px;

            .custom-steps {
              display: flex;

              .step-item {
                position: relative;
                display: flex;
                align-items: center;
                width: 76px;
                flex-direction: column;
                cursor: pointer;

                .item-icon {
                  width: 20px;
                  height: 20px;
                }

                .item-title {
                  margin-top: 4px;
                  text-align: center;
                  color: @text03;
                  .font10();
                }

                &:not(:last-of-type) {
                  &::after {
                    content: '';
                    position: absolute;
                    top: 10px;
                    left: 50%;
                    width: 56px;
                    height: 1px;
                    background-color: #d9dadb;
                    transform: translateX(10px);
                  }
                }

                &.active,
                &:hover {
                  .item-title {
                    color: @text01;
                  }
                }
              }
            }
          }

          .tr-tools {
            min-width: 62px;
          }

          &.table-head {
            background-color: @background2;
          }

          &.table-body {
            border: 1px solid rgba(0, 0, 0, 0.05);

            .table-td:not(:last-of-type) {
              border-right: 1px solid rgba(0, 0, 0, 0.05);
            }

            .table-td {
              height: 160px;
              align-content: center;

              &.tr-text {
                display: flex;
                flex-direction: column;
                padding: 0;

                &.del {
                  .tr-text__block {
                    color: @text04;
                    text-decoration-line: line-through;
                  }
                }

                .tr-text__block {
                  overflow: hidden;
                  padding: 0 16px;
                  font-size: 14px;
                  color: @text01;
                  flex: 1;
                  font-weight: 400;
                  line-height: 34px;
                  .flc();

                  & + .tr-text__block {
                    border-top: 1px solid rgba(0, 0, 0, 0.05);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 8px 0;
    width: 100%;
    height: 52px;
    font-size: 14px;
    text-align: center;
    background: #fff;
    box-shadow: 0 -1px 3px rgba(37, 37, 45, 0.2);
    line-height: 36px;

    .deselect-all {
      width: 124px;
      height: 100%;
      color: #009cf8;
      border-right: 1px solid #e8e8eb;

      &:hover {
        cursor: pointer;
      }
    }

    .number-of-selected {
      width: 121px;
      height: 100%;
      color: rgba(16, 16, 20, 0.95);
    }

    .batch-deletion {
      margin-right: 8px;
      width: 88px;
      height: 36px;
      background: #fff;
      border: 1px solid #d9d9db;
      border-radius: 6px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);

      &:hover {
        cursor: pointer;
      }
    }
  }
</style>
